html,
body {
  height: 100%;
}
*{
  margin:0;
  padding:0;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","Helvetica Neue",Helvetica,"PingFang SC","Segoe UI",Roboto,"Hiragino Sans GB",'arial','microsoft yahei ui',"Microsoft YaHei",SimSun,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
}
.layout-boxed html,
.layout-boxed body {
  height: 100%;
}
body {
  font-size: 16px;
  font-weight: 400;
  overflow-x: auto;
  overflow-y: auto;
}

ul,ol {
  list-style:none;
}
a {
  text-decoration: none;

}

.container {
  width: 100%;
  height: 100%;

  .layout-width {
    width: 1200px;
  }

  .content {
    padding-top: 60px;
    .unit1 {
      position: relative;
      width: 100%;
      height: 560px;
      .words {
        position: absolute;
        top: 183px;
        left: 50%;
        z-index:2;
        width: 860px;
        height: 180px;
        margin-left: -430px;
        text-align: center;
        color: #fff;
        h1 {
          font-size: 45px;
          line-height: 63px;
          text-shadow: black 0px 0px 13px;
        }
        h3 {
          font-size: 30px;
          line-height: 50px;
          text-shadow: black 0px 0px 13px;
        }
        h6 {
          font-size: 18px;
          line-height: 36px;
          text-shadow: black 0px 0px 13px;
        }
      }
      .video-box {
        width: 100%;
        height: 560px;
        overflow: hidden;
        position: relative;
        .primary-video {
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          max-width: none;
          max-height: 100%;
          min-width: 100%;
          min-height: 100%;
        }
        .video-cover {
          position: absolute;
          top:0;
          left:0;
          z-index:1;
          width: 100%;
          height: 560px;
        }
      }
    }
    .unit2 {
      justify-content: center;
      display: flex;
      width: 100%;
      height: 500px;
      background: url("../images/index/bg_1.jpg") no-repeat;
      background-position: center;
      .inner {
        height: 500px;
        .text-from {
          width: 562px;
          height: 500px;
          padding: 90px 60px;
          float: right;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          h1 {
            font-size: 30px;
            color: #6B9C33;
            text-align: center;
            padding: 0 44px;
          }
          .icon-style {
            width: 100%;
            height: 76px;
            margin: 27px 0;
            background: url(../images/icon.png) no-repeat 76px -139px;
          }
          p {
            font-size: 14px;
            color: #636B7E;
          }
        }
      }
    }
    .unit3 {
      position: relative;
      width: 100%;
      height: 600px;
      .unit3-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background: #272727 url("../images/index/bg_2.jpg") no-repeat top center;
        -webkit-transition: background-position 0.5s ease-out;
        -moz-transition: background-position 0.5s ease-out;
        -ms-transition: background-position 0.5s ease-out;
        -o-transition: background-position 0.5s ease-out;
        transition: background-position 0.5s ease-out;
      }
      .bg1 {
        background-image:url("../images/index/bg_2.jpg");
      }
      .bg2 {
        background-image:url("../images/index/bg_3.jpg");
      }
      .bg3 {
        background-image:url("../images/index/bg_4.jpg");
      }
      .bg4 {
        background-image:url("../images/index/bg_5.jpg");
      }
      .bg5 {
        background-image:url("../images/index/bg_6.jpg");
      }

      .main {
        position: relative;
        margin: 0 auto;
        z-index: 5;
        height: 100%;
        .sidebar {
          float: left;
          width: 309px;
          height: 600px;
          overflow: hidden;
          padding: 30px 0;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          ul {
            width: 309px;
            overflow: hidden;
            background: rgba(0,0,0,0.8);
          }
          li {
            height: 108px;
            padding: 0 26px;
            color: #454545;
            font-weight: normal;
            cursor: pointer;
            a {
              color: #fff;
              text-decoration: none;
              display: block;
              border-top: 1px solid #333;
              padding: 36px 0 21px 0;
              padding-left: 15px;
              -webkit-transition: padding-left 0.1s ease-out;
              -moz-transition: padding-left 0.1s ease-out;
              -ms-transition: padding-left 0.1s ease-out;
              -o-transition: padding-left 0.1s ease-out;
              transition: padding-left 0.1s ease-out;
              border-top: 1px solid #454545;
              h3 {
                font-size: 20px;
                line-height: 30px;
                font-weight: normal;
              }
              p{
                font-size: 14px;
                line-height: 26px;
                color: #fff;
                opacity: .4;
                filter: alpha(opacity=40);
              }
            }
          }
          li:first-child a {
            border-top: none;
          }
          li.hover {
            background-image: -webkit-linear-gradient(-270deg, #6B9C33 0, #43730C 97%);
            background-image: -moz-linear-gradient(-270deg, #6B9C33 0, #43730C 97%);
            background-image: -o-linear-gradient(-270deg, #6B9C33 0, #43730C 97%);
            background-image: linear-gradient(270deg, #6B9C33 0, #43730C 97%);
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=.75, startColorstr=#6B9C33, endColorstr=#43730C);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0.75, startColorstr=#6B9C33, endColorstr=#43730C)";
            a {
              border-top: none;
              padding-left: 25px;
              border-color: transparent;
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              -ms-transition: all 0.3s;
              -o-transition: all 0.3s;
              transition: all 0.3s;
            }
          }
        }
        ul.content {
          margin: 0px 0 100px 373px;
          height: 400px;
          position: relative;
          top: 62px;
          .content-item {
            color: #fff;
            position: absolute;
            top: 20px;
            opacity: 0;
            filter: alpha(opacity=1);
            -webkit-transition: all 0.15s ease-out 0.05s;
            -moz-transition: all 0.15s ease-out 0.05s;
            -ms-transition: all 0.15s ease-out 0.05s;
            -o-transition: all 0.15s ease-out 0.05s;
            transition: all 0.15s ease-out 0.05s;

            .header-section {
              position: relative;
              overflow: hidden;
              width: 712px;
              h3 {
                font-weight: normal;
                font-size: 30px;
                line-height: 40px;
              }
              p {
                height: 70px;
                line-height: 26px;
                font-size: 14px;
                color: #fff;
                margin-top: 20px;
              }
            }
            .solution-detail {
              .solution-link {
                font-size: 18px;
                width: 120px;
                height: 40px;
                border: 2px solid #fff;
                display: block;
                margin-top: 30px;
                text-align: center;
                line-height: 40px;
                color: #FFF;
                text-decoration: none;

              }
              .partners {
                overflow: hidden;
                margin-top: 14px;
                p{
                  font-size: 14px;
                  line-height: 26px;
                  padding: 0;
                  margin: 0;
                }
                li {
                  float: left;
                  width: 100%;
                  height: 100px;
                  margin-top: 10px;
                  background: url(../images/icon.png) no-repeat 15px -40px;
                }
              }
              .product-intro {
                overflow: hidden;
                li {
                  float: left;
                  margin-top: 36px;
                  padding-left:  23px;
                  a {
                    font-size: 16px;
                    color: #fff;
                    padding-right:  23px;
                    border-right: 1px solid #fff;
                  }
                }
              }

            }

            .btn-group {
              height: 80px;
              margin-top: 100px;
              a {
                display: block;
                position: relative;
                float: left;
                font-size: 18px;
                width: 146px;
                height: 40px;
                background-color: #6B9C33;
                margin-right: 25px;
                text-align: center;
                line-height: 40px;
                color: #FFF;
                text-decoration: none;
                opacity: 1;
                filter: alpha(opacity=100);
              }
              a:hover{
                background-color: #7CA521!important;
                opacity: 1;
                filter: alpha(opacity=100);
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;
                .qrcode-box-wrp {
                  z-index:1;
                  opacity: 1;
                  margin-top: -210px;
                  filter: alpha(opacity=100);
                }
              }
            }
            .btn-type1 {
              a:hover{
                background-color: #90C320;
                border-color: #90C320;
              }
            }
            .btn-type2 {
              a:hover{
                background-color: #D7821D!important;
              }
            }
            .btn-type3 {
              a:hover{
                background-color: #578128!important;
              }
            }
            .btn-type4 {
              a:hover{
                background-color: #357DB3!important;
              }
            }
          }
          .active {
            opacity: 1;
            filter: alpha(opacity=100);
            z-index: 2;
            top: 0;
            -webkit-transition: all 1s cubic-bezier(0, 0, 0.33, 1.02) 0.25s;
            -moz-transition: all 1s cubic-bezier(0, 0, 0.33, 1.02) 0.25s;
            -ms-transition: all 1s cubic-bezier(0, 0, 0.33, 1.02) 0.25s;
            -o-transition: all 1s cubic-bezier(0, 0, 0.33, 1.02) 0.25s;
            transition: all 1s cubic-bezier(0, 0, 0.33, 1.02) 0.25s;
          }
        }
      }
    }
  }
  .qrcode-box-wrp {
    width: 150px;
    height: 150px;
    background: #fff;
    margin-top: -230px;
    right: -2px;
    position: absolute;
    //visibility: hidden;
    z-index:-1;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: .2s;

    img {
      width: 150px;
      height: 150px;
    }

  }
}
